<template>
  <div class="">
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- 搜索与添加区域 -->
          <el-input placeholder="请输入内容" >
            <template #append>
              <el-icon><search /></el-icon>
            </template>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click='handleAddRole'>新增角色</el-button>
        </el-col>
      </el-row>
      <el-table :data="leftData" border style="width: 100%;margin-top: 10px">
        <el-table-column label="#" type="index" />
        <el-table-column label="名称" prop="name">
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template v-slot="scope" >
            <el-tag type="primary" v-if="scope.row.status === 1">{{ '有效' }}</el-tag>
            <el-tag type="danger" v-else>{{ '无效' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="描述" prop="remark">
        </el-table-column>
        <el-table-column
          :label="操作"
          width="260"
          fixed="right"
          #default="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="onDistributePermissionClick(row)"
          >
            分配权限
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(row)"
          >
            修改
          </el-button>
        </el-table-column>
      </el-table>
    </el-card>
    <distribute-permission
      v-model="distributePermissionVisible"
      :roleId="selectRoleId"
    ></distribute-permission>
  </div>

  <m-dialog v-model="dialogVisible" title="新增角色" @saveSubmit="handleSubmit">
    <el-form :model="form" label-width="120px" ref="formRef">
      <el-form-item label="名称">
        <el-input v-model="form.name" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="stateValue" @change="stateChange">
          <el-option
            v-for="item in stateSelect"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.remark" placeholder="请输入备注" type="textarea"/>
      </el-form-item>
    </el-form>
  </m-dialog>
</template>

<script setup>
import { addRole, getRoleList, updateRole } from '@/api/role'
import { reactive, ref } from 'vue'
import DistributePermission from './components/DistributePermission.vue'
import { Search } from '@element-plus/icons-vue'
import MDialog from '@/components/MDialog/index.vue'
import utils from '@/utils/utils'

const leftData = ref([])
const dialogVisible = ref(false)
const isAdd = ref(true)
const stateValue = ref('可用')
const stateSelect = ref([
  {
    label: '可用',
    value: 1
  },
  {
    label: '不可用',
    value: 0
  }
])
const form = reactive({
  id: 0,
  name: '',
  state: 1,
  remark: ''
})

const stateChange = (value) => {
  form.state = value
}

const handleSubmit = async () => {
  dialogVisible.value = false
  utils.hideLoadding()
  let result
  if (isAdd.value) {
    result = await addRole({
      name: form.name,
      status: form.state,
      remark: form.remark
    })
  } else {
    result = await updateRole({
      id: form.id,
      name: form.name,
      status: form.state,
      remark: form.remark
    })
  }
  console.log(JSON.stringify(result))
  if (result) {
    await getLeftData()
    utils.hideLoadding()
  }
}

/**
 * 分配权限
 */
const distributePermissionVisible = ref(false)
const selectRoleId = ref(-1)
const onDistributePermissionClick = row => {
  selectRoleId.value = row.id
  distributePermissionVisible.value = true
}

const handleEdit = (item) => {
  isAdd.value = false
  form.id = item.id
  form.name = item.name
  form.status = item.state
  form.remark = item.remark
  if (!dialogVisible.value) {
    dialogVisible.value = true
  }
}

const getLeftData = async () => {
  const result = await getRoleList()
  console.log(JSON.stringify(result))
  leftData.value = result
}
getLeftData()

const handleAddRole = () => {
  isAdd.value = true
  for (const key in form) {
    if (key === 'state') {
      form[key] = 1
    } else {
      form[key] = ''
    }
  }
  if (!dialogVisible.value) {
    dialogVisible.value = true
  }
}

</script>
